import React from 'react';
import { createForm } from 'rc-form';
import { Toast } from 'antd-mobile';
import styles from './newPassword.css';
import CustBtn from '../../../../../../../common/buttons/Btn';

const NewPassword = ({
  onSubmit=()=>{},
  form: { getFieldProps, getFieldsValue, validateFields },
}) => {

  const btnProps = {
    textValue:'提交',
    onOk(){
      validData();
    },
  }

  const validData = () => {
    validateFields((error, value) => {
      // console.log(error, value);
      if (error) {
        for (var i in error) {
          error[i].errors.map(e => Toast.info(e.message, 1.5))
        }
        return;
      } else if ( value.password1.length <6 ) {
         Toast.info('支付密码至少6位', 1.5)
      } else if ( value.password1 != value.password2 ) {
         Toast.info('密码不一致', 1.5)
      } else {
        onSubmit(value.password1);
      }
      console.log('value', JSON.stringify(value))

    });
  }

  const Seperator = () => <div style={{marginBottom: '1em'}}></div>;

  return (
    <div className={styles.content}>

      <div className={styles.contentBody}>
        <input type="password"
            {...getFieldProps('password1',{
              rules: [
                { required: true, message: '支付密码不能为空' }
              ]
            })}
            placeholder="请输入支付密码"
            maxLength='16'
            className={styles.inputStyle}
          />
        <Seperator/>
        <input type="password"
            {...getFieldProps('password2',{
              rules: [
                { required: true, message: '支付密码不能为空' }
              ]
            })}
            placeholder="请再次输入支付密码"
            maxLength='16'
            className={styles.inputStyle}
          />
        <Seperator/>
        <div className={styles.btn}>
          <CustBtn {...btnProps}/>
        </div>
      </div>
    </div>
  );
};

NewPassword.propTypes = {
};

export default createForm()(NewPassword);
